import { Card, Table } from 'antd'
import {DownOutlined,RightOutlined} from '@ant-design/icons'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { getDictList } from '@api/hospital/hospitList'
import { IDictList } from '@api/hospital/model/hospitalListTypes'

export default function Dict() {
    const columns: ColumnsType<any> = [
        {
            title: '名称',
            dataIndex: 'name'
        },
        {
            title: '编码',
            dataIndex: 'dictCode'
        },
        {
            title: '值',
            dataIndex: 'value'
        },
        {
            title: '创建时间',
            dataIndex: 'createTime'
        }

    ]
    const [dictList, setDictList] = useState<IDictList>([])
    const _getDictList = async () => {
        let dictList = await getDictList(1)
        console.log(dictList)
        setDictList(dictList)
    }
    useEffect(() => {
        _getDictList()
    }, [])
    return (
        <Card>
            <Table
                rowKey={'id'}
                columns={columns}
                dataSource={dictList}
                expandable={{
                    /**
                     * 
                     * record: 是当前行对象数据
                     * onExpand：展开函数，使用它展开节点
                     *      就是将record记录添加children属性，
                     *      
                     * e: react包装过的事件对象
                     */
                    expandIcon: ({ expanded, onExpand, record }) => {

                        if(!record.hasChildren) return <div style={{display:'inline-block',width:25}}></div>
                        return expanded ? (
                            <DownOutlined style={{marginRight:10}} onClick={e => onExpand(record, e)} />
                        ) : (
                            <RightOutlined  style={{marginRight:10}} onClick={ async e => {
                                
                                // console.log('record:',record)
                                // console.log('onExpand: ', onExpand)
                                // console.log('e: ', e)
                                // 1. 判断hasChildren是否为 true ，如果是true，发送ajax请求，获取子节点列表数据，赋值给record的children属性
                                if(record.hasChildren){
                                    if(!record.children){
                                        let children = await getDictList(record.id)
                                        record.children = children
                                    }
                                }
                                return onExpand(record, e)
                            }} />
                        )
                    }

                }}

            />
        </Card>
    )
}
